<template>
  <div class="template-card">
    <el-card class="tabs-card-box" >
      <div class="tabs-card-li">
        <div class="task-card-inforn"> 
          <div class="task-card-title">
            <h2 class="task-card-name">{{getCardNameLabel(cardItem)}}
              <span class="task-card-angle" v-if="cardItem.type == 1">{{$t('event.setting.constant.additional_type_tabs.name2')}}</span>
              <span class="task-card-angle" v-if="cardItem.type == 2">{{$t('event.setting.constant.additional_type_tabs.name3')}}</span>
              <span class="task-card-angle" v-if="cardItem.type == 3">{{$t('event.setting.constant.additional_type_tabs.name4')}}</span>
              <span class="task-card-angle" v-if="cardItem.type == 4">{{$t('event.setting.constant.additional_type_tabs.name5')}}</span>
              <span class="task-card-angle" v-if="cardItem.type == 5">{{$t('event.setting.constant.additional_type_tabs.name6')}}</span>
              <span class="task-card-angle" v-if="cardItem.type == 6">{{$t('event.setting.constant.additional_type_tabs.name7')}}</span>
              <span class="task-card-angle" v-if="cardItem.type == 7">{{$t('event.setting.constant.additional_type_tabs.name8')}}</span>
            </h2>
            <p class="has-used" v-if="cardItem.used && inventoryCardName">{{$t('task.setting.components.added')}}</p>
          </div>                                      
          <el-tooltip class="item" effect="dark" :disabled="!isOverflow" placement="top"><div slot="content" class="tips-msg">{{cardItem.description}}</div><p class="task-card-des" ref="parentHeight"><span ref="childHeight">{{cardItem.description}}</span></p></el-tooltip>
        </div>
        <div class="task-card-fields">
          <p>{{$t('event.setting.additional.component.templateCardItem.label1')}}：</p>
          <p class="fields-list">{{cardItem.fields}}</p>
        </div>
        <div class="task-card-footer">
          <template v-if="cardItem.type!==7">
            <el-button type="primary" class="preview btn" @click="previewCard(cardItem)">{{$t('common.base.preview')}}</el-button>
            <el-tooltip class="item" effect="dark" :content="$t('event.setting.additional.component.templateCardItem.tips1')" placement="top">
              <el-button type="primary" class="btn" @click="importcard(cardItem.cardId,'single',cardItem.cardName)" :loading="loadingSingle">{{$t('event.setting.additional.component.templateCardItem.btn1')}}</el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" :content="$t('event.setting.additional.component.templateCardItem.tips2')" placement="top">
              <el-button type="primary" class="btn" @click="importcard(cardItem.cardId,'multiple',cardItem.cardName)" :loading="loadingMultiple">{{$t('event.setting.additional.component.templateCardItem.btn2')}}</el-button>
            </el-tooltip>  
          </template>   
          <template v-else>
            <el-button type="primary" class="preview btn" @click="previewCard(cardItem)" v-if="cardItem.cardName=='工时记录'">{{$t('common.base.preview')}}</el-button>
            <div style="height: 26px;" v-else></div>
            <el-tooltip class="item" effect="dark" :content="$t('event.setting.additional.component.templateCardItem.tips2')" placement="top" v-if="cardItem.cardName=='工时记录'">
              <el-button type="primary" class="btn" @click="importcard(cardItem.cardId,'multiple',cardItem.cardName)" :loading="loadingMultiple">{{$t('common.base.addModule', {module: ''})}}</el-button>
            </el-tooltip>
            <el-button type="primary" class="btn" @click="importcard(cardItem.cardId,'multiple',cardItem.cardName)" v-if="!(cardItem.used && inventoryCardName) && cardItem.cardName!='工时记录'" :loading="loadingMultiple">{{$t('common.base.addModule', {module: ''})}}</el-button>
          </template>
        </div>
      </div>
    </el-card>
    <!--start 预览组件 -->
    <preview-card-dialog ref="previewDialog" :fields="fields"></preview-card-dialog>
    <!--end 预览组件 -->
  </div>
</template>
<script>
// api
import * as SettingTaskApi from '@src/api/SettingTaskApi';
// components
import PreviewCardDialog from './PreviewCardDialog';
import { openAccurateTab } from '@src/util/platform';
import { PageRoutesTypeEnum } from 'pub-bbx-global/pageType/dist/enum/PageRoutesEnum'
import { CardNameLabelEnum } from '@model/enum/LabelEnum'
export default {
  name: 'template-card-item',
  props: {
    cardItem:{
      type: Object,
      default: () => ({})
    },
    cardType:{
      type: String,
    }
  },
  watch: {
    cardItem(newValue) {
      if (newValue) {
        this.initOverflow()
      }
    }
  },
  data(){
    return{
      loadingSingle: false,
      loadingMultiple: false,
      isOverflow: false,
      fields:[]
    }
  },
  computed: {
    inventoryCardName() {
      const inventoryCardNameData = [this.$t('task.detail.components.sparePartList'), this.$t('task.detail.components.serviceList'), this.$t('task.detail.components.materialApply'), this.$t('common.faultLibrary.faultList')]
      return inventoryCardNameData.includes(this.cardItem.cardName)
    }
  },
  methods:{
    // 获取附加组件标题的多语言label
    getCardNameLabel(item) {
      const { cardName, cardNameLanguage } = item
      const locale = this.$i18n.locale
      return cardNameLanguage?.locale || CardNameLabelEnum[cardName] || cardName
    },
    // 初始化溢出tips
    initOverflow() {
      this.$nextTick(()=> {
        this.isOverflow = this.$refs?.parentHeight?.offsetHeight < this.$refs?.childHeight?.offsetHeight;
      })
    },
    // 预览组件
    previewCard(card) {
      this.fields = card.fieldsModule;
      this.$refs.previewDialog.openDialog();
      this.$emit('operate', 'PREVIEW', this.cardItem);
    },
    // 添加为单次/多次
    importcard(cid, inputType, cardName) {
      this.$emit('operate', inputType === 'single' ? 'ADD_SINGLE' : 'ADD_MULTIPLE', this.cardItem);

      if(inputType == 'single'){
        this.loadingSingle = true;
      }else{
        this.loadingMultiple = true;
      }

      SettingTaskApi.cardImport({id:cid, inputType}).then(res=>{
        const { code, message, result } = res;
        if(code == 0){
          this.addSuccess(result, inputType, cardName);
        }else{
          this.$message.warning(message);
        }
        if(inputType == 'single'){
          this.loadingSingle = false;
        }else{
          this.loadingMultiple = false;
        }
      }).catch(error=>({}))
    },

    // 添加成功
    addSuccess(newCid, inputType, cardName) { 
      this.$emit('update');
      
      let fromId = window.frameElement.getAttribute('id');
      if(cardName == '备件清单' || cardName == '服务清单'){
        this.$confirm(this.$t('task.tip.taskAdditionalTip1'), this.$t('common.base.toast'), {
          confirmButtonText: this.$t('common.base.iKnow'),
          cancelButtonText: this.$t('task.setting.components.goToModify'),
          type: 'warning'
        }).then(() => {// 知道了
          if(this.cardType == 'addCardSet'){
            location.reload();
          }else{
            this.$emit('updateImportcard', this.cardItem, inputType, newCid)
          }
        }).catch(() => { // 去修改
          this.$emit('updateImportcard', this.cardItem, inputType, newCid)
          openAccurateTab({
            type:PageRoutesTypeEnum.PageTaskSparepartSetting,
            titleKey:cardName,
            params:`cardId=${newCid}&cardType=${this.cardType}`,
            fromId
          })
        });
      }else{
        if(this.cardType == 'addCardSet'){
          this.$message.success(this.$t('event.setting.additional.component.templateCardItem.tips3'));
          setTimeout(()=>{
            location.reload();
          }, 1000)
        }else{
          this.$emit('updateImportcard', this.cardItem, inputType, newCid)
        }
      }
    },
  },
  components: {
    [PreviewCardDialog.name]: PreviewCardDialog,
  },
    
}
</script>
<style lang="scss" scoped>
.template-card{
    .tabs-card-box{
      margin-bottom: 12px;
      box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.04); 
      &:hover{
          box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.12);
      }
    .task-card-inforn{
        // width: 257px;
      .task-card-title{
        display: flex;
        justify-content: space-between;
        .has-used{
        font-weight: 500;
        color: $color-primary-light-6;
        font-size: 12px;
        margin-bottom: 0;
        }
        .task-card-name{  
          margin-bottom: 0;
          @include text-ellipsis;
          padding-right: 32px;
          font-size: 16px;
          color: #333333;
          line-height: 22px;
          .task-card-angle{
              padding: 0 8px;
              height: 22px;
              line-height: 22px;
              font-size: 12px;
              background: rgba(250, 140, 22, 0.2);
              border-radius: 11px;
              font-weight: 500;
              color: #FA8C16;
              border: 1px solid rgba(250, 140, 22, 0.2);
              text-align: center;
              display: inline-block;
              margin-left: 8px;
          }
        }
      }

      .task-card-des{
        height: 34px;
        font-size: 12px; 
        color: #666666;
        line-height: 17px;
        margin-top: 8px;
        @include text-ellipsis-2; 
        cursor: pointer;
        margin-block-end: 0em;

      }
    }
    .task-card-fields{
      margin: 8px 0 12px 0;
      p{
          margin-bottom: 0;
          font-size: 12px;
      }
      :first-child{
          color: #666666;
          margin-bottom: 4px;
      }
      .fields-list{
          color: #333333;
          height: 20px;
      }

    }
    .task-card-footer{
      display: flex;
      justify-content: flex-end;
      flex-wrap: wrap;
      .btn{
          padding: 4px 6px !important;
          margin-top: 12px;
          & + .btn {
            margin-left: 8px;
          }
      }
      .el-button--small{
          padding: 6px 15px;
      }
      .preview{
          background: $color-primary-light-1;
          border-color: $color-primary-light-2;
          color: $color-primary-light-6;
      }     
    }
  }
}
.tips-msg{
  width: 250px;
}

</style>